/* eslint-disable */
import React, { Component } from 'react';
import styles from './index.less';

const CockpitToggleButton = (props) => {
  const { activeIndex = -1, handleClick = null, data = [] } = props;

  const onClick = (i) => {
    typeof handleClick === 'function' && handleClick(i);
  }

  return (
    <div
      className={styles["change-button-wrapper"]}
    >
      <div className={styles["space"]}></div>
      <ul className={styles["inner"]}>
        {
          (data || []).map((m, i) => (
            <li
              key={i}
              className={activeIndex === i ? styles["active"] : ''}
              onClick={() => onClick(i)}
            >
              {m}
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default CockpitToggleButton
